import React, { useState } from 'react'
import { inject, observer } from 'mobx-react';
import { toJS } from 'mobx';
import { Tools, Icon, Bubble } from 'weaver-mobile';
import { withRouter } from 'react-router-dom';
import { getEquipment } from '../../util/common';
import { SortableContainer, SortableElement, arrayMove } from 'react-sortable-hoc';
const getLabel = Tools.getLabel;

@withRouter
@inject('moreStore')
@observer
export default class AddApplication extends React.Component {
    constructor(props) {
        super(props);
        this.equipment = getEquipment();
    }

    static defaultProps = {
        prefixCls: "fna-wallet"
    }

    componentDidMount() {
        const { moreStore } = this.props;
        const { getThreePartiesMore } = moreStore;
        let _isEMobile = this.equipment.isEMobile ? 1 : 0;
        getThreePartiesMore({ op: '0', isEMobile: _isEMobile });
    }

    componentWillUnmount() {
        const { moreStore,refresh } = this.props;
        const { saveThreeParties, addOftenFunction, addMoreFunction } = moreStore;

        let _addOftenFunction = JSON.stringify(addOftenFunction)
        let _addMoreFunction = JSON.stringify(addMoreFunction)

        //结束的时候保存  顺序
        saveThreeParties({
            oftenFunction: _addOftenFunction,
            moreFunction: _addMoreFunction
        },()=>{
            refresh();
        })
    }

    render() {
        const { moreStore } = this.props;
        const { addOftenFunction, addMoreFunction, setAddOftenFunction } = moreStore;

        this.onSortEnd = ({ oldIndex, newIndex, collection }) => {
            let newOrderObj = arrayMove(addOftenFunction, oldIndex, newIndex);
            setAddOftenFunction(newOrderObj);
        };

        return (
            <div className={`fna-addApplication`}>
                <header>{getLabel(517357, '你可以将常用的应用添加到首页显示，也可以按住拖动调整应用的顺序')}</header>

                {addOftenFunction.length > 0 ? <SortableContainer_img changeIcon={this.changeIcon} arr={addOftenFunction} pressDelay={200} axis='xy' helperClass={'fna-sortable-drag'} onSortEnd={this.onSortEnd} /> : null}
                <div className={'describe'}>{getLabel(517358, '以上应用展示在首页 ( 最多7个 )')}</div>
                <div className={'moreApplication-text'}>{getLabel(517359, '更多应用')}</div>

                <div className={'fna-drag fna-drag-more'}>
                    {addMoreFunction.map(item => {
                        let comment = '';

                        comment =
                            <div key={item.key} onClick={(e) => this.changeIcon(false, item.key, e)}>
                                <div className={`fna-flex-icon-item-icon`}>
                                    <img src={`${item.picturePath}`} width='30' height='30' />
                                </div>
                                <div className={`fna-flex-icon-item-text`}>{item.title}</div>
                                <Icon type={'blog-gengduo'} onClick={(e) => this.changeIcon(false, item.key, e)} />
                            </div>


                        return comment;

                    })}
                </div>


            </div>
        )
    }

    changeIcon = (bool, key, e) => {
        const { moreStore } = this.props;
        const { addOftenFunction, addMoreFunction } = moreStore;
        e.stopPropagation();

        if (bool && addOftenFunction.length > 7) {
            Bubble.warning(getLabel(517427, '最多展示7个应用！'))
            return
        }

        let circleArr = bool ? addOftenFunction : addMoreFunction;

        circleArr.map((items, index) => {
            if (items.key == key) {
                bool ? addMoreFunction.push(items) : addOftenFunction.push(items);
                circleArr.splice(index, 1);
            } 
        })

    }



}

@SortableContainer
class SortableContainer_img extends React.Component {
    render() {
        const {changeIcon} = this.props;

        return (
            <div className={'fna-drag'}>
                {this.props.arr.map((item, index) =>
                    <SortableElement_img
                        collection="list01" 
                        key={item.key} 
                        item={item} 
                        index={index} 
                        onSortEnd={this.onSortEnd} 
                        element_changeIcon={changeIcon}
                    />
                )}
            </div>
        )
    }


}

@SortableElement
class SortableElement_img extends React.Component {
    render() {
        const { item,element_changeIcon } = this.props;
        const { picturePath, title, key } = item;

        return (
            <div key={key} style={{ textAlign: 'center' }} onClick={(e) => { element_changeIcon(true,key,e) }}>
                <div className={`fna-flex-icon-item-icon`} >
                    <img src={`${picturePath}`} width='30' height='30' />
                </div>
                <div className={`fna-flex-icon-item-text`}>{title}</div>
                <Icon type={'cross-circle-o'} onClick={(e) => { element_changeIcon(true,key,e) }}/>
            </div>
        )
    }


}
